<template>
    <div class="app-container">
        <!-- 模板列表 -->
        <div class="formatList">
            <el-form ref="form"  :model="form" label-width="150px" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="模板名称" prop="name">
                            <el-input v-model="form.name" placeholder="最多20个字符" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模板说明" prop="desc">
                            <el-input
                                v-model="form.desc"
                                type="textarea"
                                size="large"
                                :rows="4"
                                maxlength="100"
                                placeholder="最多100个字符"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="使用地区" prop="province_id">
                            <!--    @change="handleChange" -->
                            <el-select v-model="form.province_id" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.province_id"
                                    :label="item.province_name"
                                    :value="item.province_id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <!--  :required="true" -->
                        <el-form-item label="平台卡券" prop="goods_ticket_ids">
                            <el-col :span="4">
                                <el-button type="text" @click="addCoupons">添加优惠券</el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <!--  v-loading="tableLoading" -->
                    <div class="listDiv">
                        <el-table ref="tableData2" :data="tableData2" style="width: 100%">
                            <el-table-column prop="ticket_type" label="优惠券类型" />
                            <el-table-column prop="scope" label="适用范围" />
                            <el-table-column prop="type_name" label="优惠券名称" />
                            <el-table-column prop="available" label="优惠券对应商品" />
                            <el-table-column prop="type_money" label="优惠券金额" />
                            <el-table-column prop="status" label="有效期">
                                <template slot-scope="scope">
                                    <span
                                        v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                                    >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                                    <span v-else />
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="tiket_count" label="张数" /> -->
                            <el-table-column prop="num" label="数量">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.num=1 }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-col :span="20">
                        <!--   :required="true" -->
                        <el-form-item label="医美卡券" prop="beauty_ticket_ids" class="mt_20">
                            <el-col :span="4">
                                <el-button type="text" @click="addHospital">添加优惠券</el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <div class="listDiv">
                        <el-table ref="tableData3" :data="tableData3" style="width: 100%">
                            <el-table-column prop="ticket_type" label="优惠券类型" />
                            <el-table-column prop="hospital_name" label="适用范围" />
                            <el-table-column prop="type_name" label="优惠券名称" />
                            <el-table-column prop="project_name" label="优惠券对应项目" />
                            <el-table-column prop="status" label="有效期">
                                <template slot-scope="scope">
                                    <span
                                        v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                                    >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                                    <span v-else />
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="tiket_count" label="张数" /> -->
                            <el-table-column prop="num1" label="数量">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.num1=1 }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-button type="primary" class="mt_20" @click="submitFn('form')">确定</el-button>
                </el-row>
            </el-form>
        </div>
        <!-- 添加平台卡券弹窗 -->
        <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible" width="1200px" @close="clear">
            <el-form ref="formShop" :inline="true" :model="formShop" label-width="150px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="抵扣券" prop="coupons">
                            <!-- <el-input v-model="formShop.coupons" /> -->
                            <el-select v-model="formShop.coupons" placeholder="抵扣券">
                                <el-option
                                    v-for="(item,index) in couponsType"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="优惠券名称">
                            <el-input v-model="formShop.keyword" placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch1">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div v-loading="tableLoading" class="listDiv">
                <el-table
                    ref="tableData"
                    :data="tableData"
                    style="width: 100%"
                    :row-key="getRowKeys"
                >
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column fixed type="index" label="序号" width="50" />
                    <el-table-column prop="source" label="优惠券类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.source | sourceType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type_name" label="优惠券名称" />
                    <el-table-column prop="type_money" label="优惠券金额" />
                </el-table>
                <!-- 分页 -->
                <div class="pagesCon">
                    <div>
                        <el-pagination
                            :current-page="formShop.page"
                            :page-sizes="page_sizes"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page_totals"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
                <!-- 提交按钮 -->
                <el-button type="primary" @click="submitGoods">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 医美卡券 -->
        <el-dialog title="添加优惠券" :visible.sync="addHospitalVisible" width="1200px" @close="clear1">
            <el-form ref="formBeauty" :inline="true" :model="formBeauty" label-width="150px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="体验券" prop="coupons">
                            <!--  placeholder="请选择" -->
                            <el-select v-model="formBeauty.coupons" placeholder="体验券">
                                <el-option
                                    v-for="(item,index) in couponsType"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="优惠券名称">
                            <el-input v-model="formBeauty.keyword" placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div v-loading="tableLoading" class="listDiv">
                <el-table
                    ref="tableData1"
                    :data="tableData1"
                    style="width: 100%"
                    :row-key="getRowKeys1"
                >
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column fixed type="index" label="序号" width="50" />
                    <el-table-column prop="source" label="优惠券类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.source | sourceType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type_name" label="优惠券名称" />
                    <el-table-column prop="hospital_name" label="适用范围" />
                </el-table>
                <!-- 分页 -->
                <div class="pagesCon">
                    <div>
                        <el-pagination
                            :current-page="formBeauty.page"
                            :page-sizes="page_sizes1"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page_totals1"
                            @size-change="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                        />
                    </div>
                </div>
                <!-- 提交按钮 -->
                <el-button type="primary" @click="submitBeauty">确认</el-button>
                <el-button type="primary" @click="addHospitalVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getPro,
    shopCoupons,
    beautyCoupons,
    cardTem,
    tableGoods,
    tableBeauty
} from "@/api/plusMange";
export default {
    name: "PlusFormatAdd",
    filters: {
        sourceType(e) {
            switch (e) {
                case 1:
                    return "新人大礼包";
                    break;
                case 2:
                    return "抵扣券";
                    break;
                case 3:
                    return "体验券";
                    break;
                default:
                    // return "暂无";
                    break;
            }
        }
    },
    data() {
        return {
            form: {
                province_id: "",
                name: "",
                desc: "",
                goods_ticket_ids: "",
                beauty_ticket_ids: ""
            },
            // 地区类型
            options: [],
            dialogFormVisible: false, // 平台
            addHospitalVisible: false, // 医美
            // table列表
            tableData: [], // 添加平台
            tableData1: [], // 添加医美
            tableData2: [], // 平台表
            tableData3: [], // 医美表
            // 优惠券类型
            couponsType: [],
            formShop: {
                keyword: "",
                page: 1,
                size: 10
            },
            formBeauty: {
                keyword: "",
                page: 1,
                size: 10
            },
            // 平台
            page_sizes: [10, 30, 50, 100], // 每页显示个数
            page_totals: 60, // 总条目数,
            // 医美
            page_sizes1: [10, 30, 50, 100], // 每页显示个数
            page_totals1: 60, // 总条目数,
            tableLoading: true,
            // 提交表单验证规则
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入模板名称",
                        trigger: "blur"
                    }
                ],
                desc: [
                    {
                        required: true,
                        message: "您有内容未填写，请填写后再次提交审核",
                        trigger: "blur"
                    }
                ],
                province_id: [
                    {
                        required: true,
                        message: "使用地区必须勾选",
                        trigger: "blur"
                    }
                ],
                goods_ticket_ids: [
                    {
                        required: true,
                        message: "请选择平台卡券",
                        trigger: "blur"
                    }
                ],
                beauty_ticket_ids: [
                    {
                        required: true,
                        message: "请选择医美卡券",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.getArea();
        // this.getList(this.form);
    },
    inject: ["reload"],
    methods: {
        // 获取省
        getArea() {
            getPro().then(res => {
                const resData = res.data.data;
                this.options = resData;
            });
        },
        // 添加平台卡券
        addShopList(e) {
            shopCoupons(e)
                .then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        // console.log(res);
                        const resData = res.data.data;
                        this.tableData = resData;
                        this.page_totals = res.data.meta.total;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    // console.log(err);
                    this.errorStatus(err.msg);
                    this.tableLoading = false;
                });
        },
        // 添加医美卡券
        addBeauty(e) {
            beautyCoupons(e)
                .then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        // console.log(res);
                        const resData = res.data.data;
                        this.tableData1 = resData;
                        this.page_totals1 = res.data.meta.total;
                        // this.tableData = resData;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.tableLoading = false;
                    this.errorStatus(err.msg);
                });
        },
        // 添加平台优惠券
        addCoupons() {
            this.dialogFormVisible = true;
            this.addShopList(this.formShop);
        },
        getRowKeys(row) {
            return row.id;
        },
        // 平台确认勾选
        submitGoods() {
            const selectData = this.$refs.tableData.selection;
            const id = [];
            selectData.forEach(e => {
                id.push(e.id);
            });
            // console.log("id", id);
            this.form.goods_ticket_ids = id;
            if (this.form.goods_ticket_ids.length > 0) {
                this.goodsTable({
                    goods_ticket_ids: JSON.stringify(this.form.goods_ticket_ids)
                });
            }
            this.$refs.tableData.clearSelection();
            this.dialogFormVisible = false;
        },
        // 平台卡券表
        goodsTable(e) {
            tableGoods(e)
                .then(res => {
                    if (res.data.code == 200) {
                        this.tableData2 = res.data.data;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err.msg);
                });
        },
        // 平台查询
        handleSearch1() {
            this.formShop.page = 1;
            this.addShopList(this.formShop);
        },
        // 添加医美卡券
        addHospital() {
            this.addHospitalVisible = true;
            this.addBeauty(this.formBeauty);
        },
        getRowKeys1(row) {
            return row.id;
        },
        // 医美确认勾选
        submitBeauty() {
            const selectData = this.$refs.tableData1.selection;
            const arr = [];
            selectData.forEach(e => {
                arr.push(e.id);
            });
            // console.log("arr", arr);
            this.form.beauty_ticket_ids = arr;
            if (this.form.beauty_ticket_ids.length > 0) {
                this.beautyTables({
                    beauty_ticket_ids: JSON.stringify(
                        this.form.beauty_ticket_ids
                    )
                });
            }
            this.$refs.tableData1.clearSelection();
            this.addHospitalVisible = false;

            // this.addCard(this.form.beauty_ticket_ids);
        },
        clear() {
            this.dialogFormVisible = false;
            this.formShop = {
                keyword: "",
                page: 1,
                size: 10
            };
            this.$refs.tableData.clearSelection();
        },
        clear1() {
            this.addHospitalVisible = false;
            this.formBeauty = {
                keyword: "",
                page: 1,
                size: 10
            };
            this.$refs.tableData1.clearSelection();
        },
        // 医美table表
        beautyTables(e) {
            tableBeauty(e)
                .then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        // console.log(res)
                        this.tableData3 = res.data.data;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    // console.log(err)
                    this.errorStatus(err.msg);
                });
        },
        // 添加会员模板
        addCard(e) {
            cardTem(e)
                .then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        // console.log(res)
                        this.succStatus("添加成功");
                        this.$router.push("/plusFormatList");
                        this.reload();
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    // console.log(err)
                    this.errorStatus(err.msg);
                });
        },
        // 确认添加
        submitFn(e) {
            this.$refs[e].validate(valid => {
                const datas = {
                    province_id: this.form.province_id,
                    name: this.form.name,
                    desc: this.form.desc,
                    goods_ticket_ids: JSON.stringify(
                        this.form.goods_ticket_ids
                    ),
                    beauty_ticket_ids: JSON.stringify(
                        this.form.beauty_ticket_ids
                    )
                };
                if (
                    Boolean(this.form.goods_ticket_ids) ||
                    Boolean(this.form.beauty_ticket_ids)
                ) {
                    if (valid) {
                        this.addCard(datas);
                    } else {
                        this.$message({
                            message: "有必填项没填，不能提交咯",
                            type: "warning"
                        });
                        return false;
                    }
                } else {
                    this.$message({
                        message: "有必填项没填，不能提交咯",
                        type: "warning"
                    });
                    // this.errorStatus('有必填项没填，不能提交咯')
                }
            });
        },
        // 医美查询
        handleSearch() {
            this.formBeauty.page = 1;
            this.addBeauty(this.formBeauty);
        },
        // 添加平台
        // 每页显示条数
        handleSizeChange(val) {
            this.formShop.size = val;
            this.addShopList(this.formShop);
        },
        // 当前页
        handleCurrentChange(val) {
            this.formShop.page = val;
            this.addShopList(this.formShop);
        },
        // 添加医美
        // 每页显示条数
        handleSizeChange1(val) {
            this.formBeauty.size = val;
            this.addBeauty(this.formBeauty);
        },
        // 当前页
        handleCurrentChange1(val) {
            this.formBeauty.page = val;
            this.addBeauty(this.formBeauty);
        },
        // 弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        // 成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        // 失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        }
    }
};
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.mt_20 {
    margin-top: 20px;
}
</style>
